<template>
  <div class="login">
    <vs-row justify="center">
      <vs-col :w="mobile">
        <div class="panel">
          <div class="center">
            <h1>登录</h1>
          </div>
          <div class="center content-inputs">
            <vs-input v-model="name" placeholder="User name">
              <template #icon>
                <i class="bx bx-user"></i>
              </template>
            </vs-input>

            <vs-input
              type="password"
              icon-after
              v-model="password"
              placeholder="Password"
            >
              <template #icon>
                <i class="bx bx-lock-open-alt"></i>
              </template>
            </vs-input>
          </div>
          <div class="center content-inputs">
            <vs-button active @click="signinClick" class="button"
              >登录</vs-button
            >
            <vs-button success active @click="goRegister" class="button" shadow
              >注册</vs-button
            >
          </div>
          <div class="center content-inputs">
            {{ env }}
          </div>
        </div>
      </vs-col>
    </vs-row>
    <vs-row justify="center">
      <vs-col :w="mobile + 2">
        <copyright />
      </vs-col>
    </vs-row>
  </div>
</template>

<script>
import { signin } from "@/api/user";
import copyright from "./copyright.vue";

export default {
  name: "login",
  data() {
    return {
      name: "",
      password: "",
      mobile: 4,
      env: process.env.NODE_ENV,
    };
  },
  components: {
    copyright,
  },
  methods: {
    // 注册
    goRegister() {
      this.$router.push("/register");
    },
    // 登录
    async signinClick() {
      const loading = this.$vs.loading({ type: "scale" });

      const req = await signin({ name: this.name, password: this.password });
      if (req.data && req.data.status) {
        // console.log(req.data);
        this.$store.commit("userid", req.data.data.id);
        this.$store.commit("username", req.data.data.name);
        this.$store.commit("like", req.data.data.like);
        this.$router.push("/task");
      } else {
        this.openNotification(req.data.message);
      }
      loading.close();
    },
    openNotification(title) {
      this.$vs.notification({
        progress: "auto",
        icon: "<i class='bx bxs-error' ></i>",
        color: "danger",
        position: "top-right",
        title: title,
      });
    },
    isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
  },
  mounted() {
    this.mobile = this.isMobile() ? 10 : 4;
  },
};
</script>

<style scoped lang="stylus">
.center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  flex-wrap: wrap;
  color: #fff;
}
.content-inputs .vs-input-parent {
  margin: 10px;
}
.panel {
  border-radius: 20px;
  background-color: rgb(30, 32, 35);
}
h1 {
  color: #fff;
}
.button {
  width: 100px;
  text-align: justify;
  text-justify: distribute-all-lines;
  text-align-last: justify;
}
.login {
  display: flex;
  align-items: center;
  justify-content:center;
  flex-direction: column;
  min-height: 90vh;
  width: 100%;
  span {
    width: 100%;
  }
}
</style>
